<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'

// 定义事件类型
interface Event {
  xq: number // 表示星期几 (1-7)
  start: number // 起始节次
  end: number // 结束节次
  title?: string // 课程名称
  skjc?: string // 授课节次
  addr?: string // 地址
  jxbzc?: string // 教学班备注
  num?: string // 人数
  type?: number // 类型
  conflict?: number // 冲突标识 (1, 2, 或 3)
}

const props = defineProps<{
  afternoonLength: number
  length: number
  events: Event[]
}>()

const tableCellStyle = ({ row, column }: { row: any; column: any }) => {
  if (row[column.property].title !== undefined) {
    if (row[column.property].type === 1) {
      return {
        'background-color': '#2B65EC',
        'border-radius': '10px',
        color: '#fff'
      }
    } else if (row[column.property].type === 2) {
      return {
        'background-color': '#7F38EC',
        'border-radius': '10px',
        color: '#fff'
      }
    }
  }
  return {}
}

const timetable: any = ref([])
const makeTimetable = () => {
  timetable.value = []
  for (let i = 0; i < props.length; i++) {
    const one: any = {
      jc: i + 1,
      mon: {},
      tue: {},
      wed: {},
      thu: {},
      fri: {},
      sat: {},
      sun: {}
    }
    timetable.value.push(one)
  }

  // 添加冲突行
  timetable.value.push({
    jc: '冲突1',
    mon: {},
    tue: {},
    wed: {},
    thu: {},
    fri: {},
    sat: {},
    sun: {}
  })
  timetable.value.push({
    jc: '冲突2',
    mon: {},
    tue: {},
    wed: {},
    thu: {},
    fri: {},
    sat: {},
    sun: {}
  })
  timetable.value.push({
    jc: '冲突3',
    mon: {},
    tue: {},
    wed: {},
    thu: {},
    fri: {},
    sat: {},
    sun: {}
  })
}

const weeks = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']

const mergeData = () => {
  if (props.events.length > 0) {
    for (let i = 0; i < props.events.length; i++) {
      const event = props.events[i]
      const week = weeks[event.xq - 1]

      if (event.conflict) {
        timetable.value[props.length + event.conflict - 1][week] = event
      } else {
        timetable.value[event.start - 1][week] = event
      }
    }
  }
}

const objectSpanMethod = ({
  row,
  rowIndex,
  columnIndex
}: {
  row: any
  rowIndex: number
  columnIndex: number
}) => {
  if (columnIndex >= 1 && columnIndex <= 7 && rowIndex < props.length) {
    const day = weeks[columnIndex - 1]
    if (row[day].title !== undefined) {
      return {
        rowspan: row[day].end - row[day].start + 1,
        colspan: 1
      }
    } else {
      return {
        rowspan: 1,
        colspan: 1
      }
    }
  }
  return {
    rowspan: 1,
    colspan: 1
  }
}

makeTimetable()
onMounted(() => {
  mergeData()
})
watch(
  props,
  (_newValue, _oldValue) => {
    mergeData()
  },
  { immediate: true, deep: true }
)
</script>

<template>
  <div class="panel">
    <el-table
      :data="timetable"
      :border="true"
      :span-method="objectSpanMethod"
      :header-cell-style="{
        background: '#d9e5fd',
        color: 'black',
        fontWeight: 500
      }"
      style="width: 100%"
      :cell-style="tableCellStyle"
    >
      <el-table-column prop="jc" label="节次" align="center"> </el-table-column>
      <el-table-column prop="mon" label="星期一" align="left">
        <template v-slot="scope">
          <div v-if="scope.row.mon.title !== undefined">
            <div class="tesx-1">
              {{ scope.row.mon.title }}
            </div>
            <div class="tesx-1">{{ scope.row.mon.skjc }}</div>
            <div class="tesx-1">{{ scope.row.mon.addr }}</div>
            <div class="tesx-1">
              {{ scope.row.mon.jxbzc }}
            </div>
            <div class="tesx-1">{{ scope.row.mon.num }}人</div>
          </div>
          <div v-else />
        </template>
      </el-table-column>
      <el-table-column prop="tue" label="星期二" align="left">
        <template v-slot="scope">
          <div v-if="scope.row.tue.title !== undefined">
            <div class="tesx-1">{{ scope.row.tue.title }}</div>
            <div class="tesx-1">{{ scope.row.tue.skjc }}</div>
            <div class="tesx-1">{{ scope.row.tue.addr }}</div>
            <div class="tesx-1">
              {{ scope.row.tue.jxbzc }}
            </div>
            <div class="tesx-1">{{ scope.row.tue.num }}</div>
          </div>
          <div v-else />
        </template>
      </el-table-column>
      <el-table-column prop="wed" label="星期三" align="left">
        <template v-slot="scope">
          <div v-if="scope.row.wed.title !== undefined">
            <div class="tesx-1">{{ scope.row.wed.title }}</div>
            <div class="tesx-1">
              {{ scope.row.wed.skjc }}
            </div>
            <div class="tesx-1">
              {{ scope.row.wed.addr }}
            </div>
            <div class="tesx-1">
              {{ scope.row.wed.jxbzc }}
            </div>
            <div class="tesx-1">{{ scope.row.wed.num }}人</div>
          </div>
          <div v-else />
        </template>
      </el-table-column>
      <el-table-column prop="thu" label="星期四" align="left">
        <template v-slot="scope">
          <div v-if="scope.row.thu.title !== undefined">
            <div class="tesx-1">
              {{ scope.row.thu.title }}
            </div>
            <div class="tesx-1">{{ scope.row.thu.skjc }}</div>
            <div class="tesx-1">{{ scope.row.thu.addr }}</div>
            <div class="tesx-1">
              {{ scope.row.thu.jxbzc }}
            </div>
            <div class="tesx-1">{{ scope.row.thu.num }}</div>
          </div>
          <div v-else />
        </template>
      </el-table-column>
      <el-table-column prop="fri" label="星期五" align="left">
        <template v-slot="scope">
          <div v-if="scope.row.fri.title !== undefined">
            <div class="tesx-1">{{ scope.row.fri.title }}</div>
            <div class="tesx-1">{{ scope.row.fri.skjc }}</div>
            <div class="tesx-1">{{ scope.row.fri.addr }}</div>
            <div class="tesx-1">
              {{ scope.row.fri.jxbzc }}
            </div>
            <div class="tesx-1">{{ scope.row.fri.num }}</div>
          </div>
          <div v-else />
        </template>
      </el-table-column>
      <el-table-column prop="sat" label="星期六" align="left">
        <template v-slot="scope">
          <div v-if="scope.row.sat.title !== undefined">
            <div class="tesx-1">{{ scope.row.sat.title }}</div>
            <div class="tesx-1">{{ scope.row.sat.skjc }}</div>
            <div class="tesx-1">{{ scope.row.sat.addr }}</div>
            <div class="tesx-1">
              {{ scope.row.sat.jxbzc }}
            </div>
            <div class="tesx-1">{{ scope.row.sat.num }}</div>
          </div>
          <div v-else />
        </template>
      </el-table-column>
      <el-table-column prop="sun" label="星期日" align="left">
        <template v-slot="scope">
          <div v-if="scope.row.sun.title !== undefined">
            <div class="tesx-1">{{ scope.row.sun.title }}</div>
            <div class="tesx-1">{{ scope.row.sun.skjc }}</div>
            <div class="tesx-1">{{ scope.row.sun.addr }}</div>
            <div class="tesx-1">
              {{ scope.row.sun.jxbzc }}
            </div>
            <div class="tesx-1">{{ scope.row.sun.num }}</div>
          </div>
          <div v-else />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.panel {
  box-sizing: border-box;
}

.jcs-1 {
  width: 30px;
  background: #000;
}
:deep() .el-table__header {
  width: 100% !important;
}
:deep() .el-table__body {
  width: 100% !important;
}
:deep() .el-table__header > colgroup > col {
  width: 12.5%;
}

:deep() .el-table__body > colgroup > col {
  width: 12.5%;
}

:deep() .el-table .cell {
  font-size: 12px;
  padding: 0 0;
  text-align: center;
}
:deep() .el-table .el-table__cell {
  padding: 5px;
}
.tesx-1 {
  font-size: 13px;
  text-align: left;
}
</style>
